<template>
	<div>
		<div class="site_info_wrap">
			<el-form ref="editForm" :model="edit" :rules="editRules" label-width="130px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="站点名称" prop="name">
							<el-input v-model="edit.name" placeholder="请输入站点名称" class="w-200"></el-input>
						</el-form-item>
						<el-form-item label="站点属性" prop="type">
							<el-select v-model="edit.type" placeholder="请选择属性" class="w-200">
								<el-option label="全部" :value="0">
								</el-option>
								<el-option label="直营" :value="1">
								</el-option>
								<el-option label="加盟" :value="2">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="联系电话" prop="mobile">
							<el-input v-model="edit.mobile" placeholder="请输入联系电话" class="w-200"></el-input>
						</el-form-item>
						<el-form-item label="地址" prop="province">
							<VDistpicker :province="edit.address.province" :city="edit.address.city" :area="edit.address.area" @province="onChangeProvince1" @city="onChangeCity1" @area="onChangeArea1">
							</VDistpicker>
							<el-input v-model="edit.address.street" placeholder="请输入街道" style="width: 300px;margin-top: 10px;"></el-input>
							<el-input v-model="edit.address.detail" type="textarea" placeholder="请输入详细地址" style="width: 300px;margin-top: 10px;display: block;"></el-input>
						</el-form-item>
						<el-form-item label="营业时间" prop="bizTime">
							<el-time-picker v-model="edit.bizTime.start" placeholder="开始时间点" value-format="HH:mm" style="width: 140px;">
							</el-time-picker>
							<el-time-picker v-model="edit.bizTime.end" placeholder="结束时间点" value-format="HH:mm" style="width: 140px;">
							</el-time-picker>
						</el-form-item>
						<el-form-item label="服务小区" prop="plot">
							<el-input v-for="item in edit.plot.length" v-model="edit.plot[item-1]" placeholder="服务小区" style="width: 100px;"></el-input>
							<el-button @click="plotAddBtn()" size="small">添加</el-button>
							<!--<el-input v-model="edit.plot" placeholder="请输入服务小区" class="w-200"></el-input>-->
						</el-form-item>
						<el-form-item label="门店面积" prop="shop.area">
							<el-input v-model="edit.shop.area" placeholder="请输入服务小区（小区之间用、分割）" style="width: 100px;"></el-input>平方米
						</el-form-item>
						<el-form-item label="租金" prop="shop.rentMoney">
							<el-input v-model="edit.shop.rentMoney" placeholder="请输入服务小区（小区之间用、分割）" style="width: 100px;"></el-input>元
						</el-form-item>
						<el-form-item label="门店租赁日期" prop="bizTime">
							<el-date-picker v-model="edit.shop.rentStartDate" type="date" placeholder="开始时间点" value-format="yyyy-MM-dd" style="width: 140px;">
							</el-date-picker>
							<el-date-picker v-model="edit.shop.rentEndDate" type="date" placeholder="结束时间点" value-format="yyyy-MM-dd" style="width: 140px;">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="站点负责人" prop="manager.name">
							<el-input v-model="edit.manager.name" placeholder="请输入站点负责人" class="w-200"></el-input>
						</el-form-item>
						<el-form-item label="负责人手机" prop="manager.mobile">
							<el-input v-model="edit.manager.mobile" placeholder="请输入负责人手机" class="w-200"></el-input>
						</el-form-item>
						<el-form-item label="负责人身份证" prop="manager.idcard">
							<el-input v-model="edit.manager.idcard" placeholder="请输入负责人省份证" class="w-200"></el-input>
						</el-form-item>

						<el-form-item label="负责人支付宝" prop="manager.alipay">
							<el-input v-model="edit.manager.alipay" placeholder="请输入负责人支付宝" class="w-200"></el-input>
						</el-form-item>
						<el-form-item label="负责人微信" prop="manager.wechat">
							<el-input v-model="edit.manager.wechat" placeholder="请输入负责人微信" class="w-200"></el-input>
						</el-form-item>
						<el-form-item label="紧急联系人" prop="emergencyContractor.name">
							<el-input v-model="edit.emergencyContractor.name" placeholder="请输入紧急联系人" class="w-200"></el-input>
						</el-form-item>

						<el-form-item label="紧急联系人电话" prop="emergencyContractor.mobile">
							<el-input v-model="edit.emergencyContractor.mobile" placeholder="请输入紧急联系人电话" class="w-200"></el-input>
						</el-form-item>
						<el-form-item label="加盟费" prop="joinMoney">
							<el-input v-model="edit.joinMoney" placeholder="请输入加盟费" class="w-200"></el-input>
						</el-form-item>
						<el-form-item label="保证金" prop="assuranceMoney">
							<el-input v-model="edit.assuranceMoney" placeholder="请输入保证金" class="w-200"></el-input>
						</el-form-item>

						<el-form-item label="加盟合作日期" prop="joinStartDate">
							<el-date-picker v-model="edit.joinStartDate" type="date" placeholder="开始时间点" value-format="yyyy-MM-dd" style="width: 140px;">
							</el-date-picker>
							<el-date-picker v-model="edit.joinEndDate" type="date" placeholder="结束时间点" value-format="yyyy-MM-dd" style="width: 140px;">
							</el-date-picker>
						</el-form-item>
						<!--<el-form-item label="站点后台账号">
							<el-input v-model="edit.account" disabled placeholder="根据城市区县站点名称自动生成" class="w-200"></el-input>
						</el-form-item>
						<el-form-item label="站点后台密码" prop="password">
							<el-input v-model="edit.password" placeholder="请输入站点后台密码" class="w-200"></el-input>
						</el-form-item>-->
					</el-col>
					<!--右边地图-->
					<el-col :span="12">
						<div id="container"></div>
						<el-col :span="24" style="padding-top: 20px;">
							<el-input v-model="formatted_address" placeholder="输入地点查询地图" style="width: 320px;"></el-input>
							<el-button @click="mapInputSearch" type="primary">查询</el-button>
						</el-col>
						<el-col :span="24" style="padding-top: 20px;">
							当前定位地址：{{formatted_address}}
						</el-col>
					</el-col>
				</el-row>
				<el-row class="shop_pic_wrap" :gutter="20" style="">
					<el-col class="text_r" :span="2">
						门店照片
					</el-col>
					<el-col :span="21">
						<el-col class="text_c" :span="6">
							<UploadImg :backImgUrl='edit.photos[0]' @getChildUploadUrl="getOneImgUrl"></UploadImg>
							<el-col :span="24" class="m_top20">门店正面</el-col>
						</el-col>
						<el-col class="text_c" :span="6">
							<UploadImg :backImgUrl='edit.photos[1]' @getChildUploadUrl="getTwoImgUrl"></UploadImg>
							<el-col :span="24" class="m_top20">接待台</el-col>
						</el-col>
						<el-col class="text_c" :span="6">
							<UploadImg :backImgUrl='edit.photos[2]' @getChildUploadUrl="getThreeImgUrl"></UploadImg>
							<el-col :span="24" class="m_top20">消防栓、监控、货架等设备</el-col>
						</el-col>
						<el-col class="text_c" :span="6">
							<UploadImg :backImgUrl='edit.photos[3]' @getChildUploadUrl="getFourImgUrl"></UploadImg>
							<el-col :span="24" class="m_top20">营业执照</el-col>
						</el-col>
						<el-col :span="24" style="color: #999;text-align: center;margin-top: 20px;">
							请上传店铺实景照片，最大10M，支持jpg/jpeg/png/gif格式
						</el-col>
					</el-col>
				</el-row>
				<el-row class="add_btn" style="">
					<el-col :span="24">
						<el-button @click="editNewSite" type="primary">完成</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
</template>
<script>
	import VDistpicker from 'v-distpicker'
	import UploadImg from '@/components/Common/uploadImg'
	import http from '@/assets/js/http.js'

	export default {
		components: {
			VDistpicker,
			UploadImg
		},
		data() {
			return {
				formatted_address: '', //地图选择的位置

				edit: {
					siteId: '', //站点id
					name: '', //站点名称
					type: '', //属性 1直营 2加盟
					mobile: '', //手机号码
					address: { // 地址
						province: '', //省份
						city: '', // 城市  
						area: '', //区县
						street: '', //街道地址
						detail: '', //详细地址
					},
					bizTime: { // 营业时间
						start: '', //开始时间 HH:mm
						end: '', //结束时间 HH:mm
					},
					plot: [], //小区（提交前要转成数组）
					shop: {
						area: '', // 平米
						rentMoney: '', // 租金
						rentStartDate: '', //租金起始时间 yyyy-MM-dd
						rentEndDate: '', //租金结束时间 yyyy-MM-dd
					},
					manager: { // 负责人
						name: '', //姓名
						mobile: '', //手机号码
						idcard: '', //身份证号
						alipay: '', //支付宝
						wechat: '', //微信
					},
					emergencyContractor: { // 紧急联系人
						name: '', //姓名
						mobile: '', //手机
					},
					joinMoney: '', //加盟费
					assuranceMoney: '', //保证金
					joinStartDate: '', //加盟起始时间 yyyy-MM-dd
					joinEndDate: '', //加盟结束时间 yyyy-MM-dd
//					account: '', //登录账号（不用输入）
//					password: '', //密码
					photos: [], // 门店照片
					location: {
						lng: '', //经度
						lat: '', //维度
					}
				},
				editRules: {
					name: [{
						required: true,
						message: '请输入请站点名称'
					}, {
						min: 6,
						max: 15,
						message: '字母、数字、符号6-15位',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择属性 '
					}],
					mobile: [{
						required: true,
						message: '请输入手机号码'
					}, {
						min: 8,
						max: 13,
						message: '数字8-13位',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请选择省份'
					}],
					bizTime: [{
						required: true,
						message: '请选择营业时间'
					}],
					plot: [{
						required: true,
						message: '请输入小区名称'
					}],
					shop: [{
						required: true,
						message: '请输入平米'
					}],
					shop: [{
						required: true,
						message: '请输入租金'
					}],
					shop: [{
						required: true,
						message: '请选择租金起始时间'
					}],
					shop: [{
						required: true,
						message: '请选择租金结束时间'
					}],
					manager: [{
						required: true,
						message: '请输入姓名'
					}],
					manager: [{
						required: true,
						message: '请输入手机号码'
					}],
					manager: [{
						required: true,
						message: '请输入身份证号'
					}],
					emergencyContractor: [{
						required: true,
						message: '请输入紧急联系人姓名'
					}],
					emergencyContractor: [{
						required: true,
						message: '请输入紧急联系人手机'
					}],
				},

				oneImg: '',
				dialogImageUrl: '',
				dialogVisible: false,
				value4: [], //营业时间
				sxSelectValue: '',
				mapObject: {},

			};
		},
		mounted() {
			let that = this
			var map = new AMap.Map('container', {
				resizeEnable: true,
				zoom: 12, //级别
			})

			function showInfoClick(e) {
				$.ajax({
					type: "get",
					url: 'http://restapi.amap.com/v3/geocode/regeo?key=ea717a1f7bd883f8eb07aa4c987a7854&location=' + e.lnglat.getLng() + ',' + e.lnglat.getLat(),
					async: true,
					success: function(res) {
						console.log('res', res)
						that.formatted_address = res.regeocode.formatted_address
						//判断是直辖市
						if(Array.isArray(res.regeocode.addressComponent.city)) {
							that.edit.address.province = res.regeocode.addressComponent.province
							that.edit.address.city = res.regeocode.addressComponent.province
						} else {
							that.edit.address.province = res.regeocode.addressComponent.province
							that.edit.address.city = res.regeocode.addressComponent.city
						}
						that.edit.address.area = res.regeocode.addressComponent.district
						that.edit.address.street = res.regeocode.addressComponent.township
					}
				});
			}
			//地图绑定点击事件
			map.on('click', showInfoClick);
		},
		created() {
			this.edit.siteId = this.$route.query.siteId
			this.fetchDetail(this.edit.siteId)
			
//			this.$watch('edit.address.city', {
//				deep: true,
//				handler: function() {
//					this.fetchAccountName()
//				}
//			})
//			this.$watch('edit.address.area', {
//				deep: true,
//				handler: function() {
//					this.fetchAccountName()
//				}
//			})
//			this.$watch('edit.name', {
//				deep: true,
//				handler: function() {
//					this.fetchAccountName()
//				}
//			})
		},
		methods: {
			getOneImgUrl(imgUrl) {
				this.edit.photos[0] = imgUrl;
			},
			getTwoImgUrl(imgUrl) {
				this.edit.photos[1] = imgUrl;
			},
			getThreeImgUrl(imgUrl) {
				this.edit.photos[2] = imgUrl;
			},
			getFourImgUrl(imgUrl) {
				this.edit.photos[3] = imgUrl;
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			mapInputSearch() {
				axios.get('http://api.map.baidu.com/place/v2/suggestion?query=天安门&region=北京&city_limit=true&output=json&ak=CVGt8SC8NzsBycrn4atyO1HEI9utG6FL', null).then((response) => {
					console.log('response', response)
				}, (response) => {})
			},
			onChangeProvince1(data) {
				this.edit.address.province = data.value;
			},
			onChangeCity1(data) {
				this.edit.address.city = data.value;
			},
			onChangeArea1(data) {
				this.edit.address.area = data.value;
			},
			//获取账号名
			fetchAccountName() {
				let that = this;
				if(that.edit.address.city && that.edit.address.area && that.edit.name) {
					let pData = {
						city: that.edit.address.city,
						area: that.edit.address.area,
						name: that.edit.name
					}
					that.apiPost("/api/backend/base/site/account-name/generate", pData).then(res => {
						if(res.code == 200) {
							that.edit.account = res.edit.account
							that.edit.password = res.edit.password
						}
					})
				}
			},
			editNewSite() {
				let that = this;
				//小区字符串转数组
				that.apiPost("/api/backend/base/site/modify", that.edit).then(res => {
					if(res.code == 200) {
						that.$message({
							type: "success",
							message: '修改站点成功！'
						})
						that.$router.push({
							path: '/siteinfo'
						});
					}
				})
			},
			fetchDetail(siteId) {
				let that = this;
				that.apiGet("/api/backend/base/site/detail?siteId="+siteId).then(res => {
					if(res.code == 200) {
						that.edit = res.data;
					}
				})
			},
			plotAddBtn() {
				let that = this;
				that.plot.length++
			},
		},
		mixins: [http]
	}
</script>

<style scoped>
	.w-200 {
		width: 200px;
	}
	
	.site_info_wrap {
		padding: 60px 0 50px;
		background: #fff;
		font-size: 14px;
		color: #666;
	}
	
	.text_l {
		text-align: left;
	}
	
	.text_r {
		text-align: right;
	}
	
	.text_c {
		text-align: center;
	}
	
	.line_h {
		padding: 20px 0;
	}
	
	.line_h4 {
		line-height: 40px;
	}
	
	#container {
		width: 400px;
		height: 400px;
	}
	
	.shop_pic_wrap {
		padding-top: 20px;
	}
	
	.add_btn {
		text-align: center;
		padding: 50px 0 100px;
	}
	
	.add_btn .el-button {
		font-size: 20px;
		line-height: 26px;
		width: 400px;
	}
	
	.distpicker-address-wrapper {
		width: 360px;
	}
	
	.distpicker-address-wrapper select {
		width: 100px;
	}
	
	.m_top20 {
		margin-top: 20px;
	}
</style>